<template>
  <div class="app">
    <div>flex</div>

    <router-link id="router" to="home">home</router-link>
    <br>
    <router-link id="router" to="/about">about</router-link>
    <br>


    <test-page></test-page>
    <input type="color">
    <!--    <event-test></event-test>-->
    <section>
      <div class="text-3xl font-bold underline flex text-blue-600/100">
        flex
      </div>
    </section>
    <div class="con">
      <el-input></el-input>
    </div>
    <div class="par">
      <div class="child">
        child
      </div>
    </div>
    <!--    <router-link to="/">home</router-link>-->
    <router-link id="router" to="home">home</router-link>
    <br>
    <router-link id="router" to="/about">about</router-link>
    <br>

    <router-link id="router" to="/test">testpage</router-link>
    <br>
    <router-link id="router" to="/css/selector">selector</router-link>
    <!--selector-->
    <br>
    下方router-view
    <br>

    <router-view></router-view>
    <!--    <cup></cup>-->
    <!--    <components-status background="red" value="666"></components-status>-->
    <!--    <editor v-model="state"></editor>-->
    <!--    <div class="select-c">-->
    <!--      77select-->
    <!--    </div>-->
  </div>
</template>
<script setup>
import data from './data.json'
import {ref} from "vue";
import Editor from "./packages/editor.jsx";
import ComponentsStatus from "./packages/componentsStatus.vue";
import Cup from "./packages/cup.vue";
import EventTest from "./views/eventTest/index.vue";
import TestTable from "./components/TestTable.vue";
import TestPage from "./components/TestPage.vue";


//  函数作为返回值

function makeFn(){
  let msg = "hello Closure!"
  return function(){
    console.log(msg)
  }
}
let fn = makeFn()
fn()






// for (var i = 1; i <= 9; i++) {     //外层循环控制行
//
//   for (var j = 1; j <= i; j++) {
//
//     console.log(j + "*" + i + "=" + j * i + "&nbsp;&nbsp;&nbsp;");
//
//   }
//
//   // document.write("</br>");
//
// }


// promise接口顺序调用
let testFunc

let arr5 = [{
  id: 1,
  check: true
}, {
  id: 2,
  check: true
}, {
  id: 3,
  check: true
}]
// let mapArr = arr5.map(item => {
//   if (item.check) {
//     return item.id
//   }
// }).includes(item => !item)
// console.log('mapArr=', mapArr)
var [a, b, c] = [1, 2]
console.log('a', a, b, c)
var a4 = {
  name: "Cherry",
  fn: function (a, b) {
    console.log(a + b)
  }
}

var b4;
a4.fn.bind(a4, 1, 2)()           // 3

console.log('887')

const state = ref(data)


let arr3 = [1, 12, 3, 2, 12, 14]
let sortFunc = function () {
  return arr3.sort(function (a, b) {
    console.log('a==', a, 'b=', b)
    return a - b
  })
}
// console.log('arr3==', arr3, sortFunc())


// 选择排序
function SelectionSort(arr) {
  let len = arr.length
  for (let i in arr) {
    let min = i
    for (let j in len - 1) {

    }
  }
}


function shallowCopy(source) {
  // 主要一个新对象
  let obj = {}
  for (let sourceKey in source) {
    if (source.hasOwnProperty(sourceKey)) {
      obj[sourceKey] = source[sourceKey]
    }
  }
  return obj
}

let person = {
  name: 'li',
  age: 21,
  address: [1, 2, 3],
}
let newPerson = shallowCopy(person)


newPerson.name = '666'

let new2 = {}
new2 = person
new2.name = '777'


// console.log('newPerson===', newPerson,person)
// console.log('new2===', new2, person)


//
// // 考察闭包,递归,全局变量作用域
// let res = 0
//
// function add(n) {
//   if (!n) {
//     return res
//   }
//   res = n
//   console.log('add===', res, n)
//   return function (n) {
//     console.log('add-r===', res, n)
//     return add(res + n)
//   }
// }
//
// let result = add(1)(2)(3)()
// console.log('add()-', result)


// 找出页面的所有html标签
// confirm('test')
let qsa = [...document.querySelectorAll('*')].map(v => v.tagName) // 伪数组
//
// console.log('qsa=', qsa, Array.isArray(qsa))


let lists = [{
  id: 1,
  name: '节点1',
  pid: 0
}, {
  id: 2,
  name: '节点1-1',
  pid: 1
}, {
  id: 3,
  name: '节点1-2',
  pid: 1
}, {
  id: 4,
  name: '节点2',
  pid: 0
}]
let l2 = [
  {id: "1224454", name: '测试1', pid: '0'},
  {id: "19994", name: '子测试1', pid: '1224454'},
  {id: "2222555", name: '子测试2', pid: '1224454'},
  {id: "9999", name: '三级子测试333', pid: '2222555'},
  {id: "666", name: '测试1', pid: '0'},
  {id: "888", name: '测试1', pid: '0'},
  {id: "9999", name: '测试1', pid: '0'}]

function checkList(list, rootId) {
  let arr = []
  list.forEach(item => {
    if (item.pid == rootId) {
      console.log('找到了==', item)
      let children = checkList(list, item.id) //找到之后,找下面的item有没有子节点
      console.log('children===', children)
      if (children.length) {
        item.children = children     // 如果children的长度大于0 说明找到了子节点
      }
      arr.push(item); // 将内容加入到数组中
    }
  })
  return arr
}

console.log('l2==', l2.length)
let checkRes = checkList(lists, lists[0].pid)
console.log('checkRes==', checkRes)
// 实现pid分类


// add()


</script>


<style scoped lang="scss">
@import url('./input.css');

body {
  display: flex;
}

.con {
  height: 100%;
  width: 100%;
  //position: fixed;
  //top: 20px;
  //left: 20px;
  //right: 20px;
  //bottom: 20px;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.select-c::selection {
  background: red;
}

.par {
  height: 200px;
  width: 100px;
  border: aquamarine 1px solid;
  display: grid;

}

.child {
  justify-self: center;
  align-self: center;
}

#router {
  text-decoration: underline;
  //color:red
}
router-link {

}

</style>
